<template>
	<view class="com-read-more y-flex position-relative" :style="{'height': showFull ? '' : boxHeight}">
		<text @longpress="handleLongpress" :style="{
			'font-size': _pixelunit(fontSize), color: color,
			'line-height': _pixelunit(lineHeight),
			'text-align': align,
			'text-overflow': 'ellipsis',
			'lines': lines
		}">{{text}}</text>
		<com-gap height="50" v-if="showFull"></com-gap>
		<view class="position-absolute bottom-0 left-0 right-0 y-flex" style="height: 90rpx;" v-if="moreShow">
			<view class="y-flex-1 position-relative top-5" v-if="!showFull" :style="{'background-image': `linear-gradient(to top, ${_hexToRgba(shadowColor, 0.5)}, ${_hexToRgba(shadowColor, 0.1)})`}"></view>
			<view class="y-flex-1 position-relative top-5" v-if="!showFull" :style="{'background-image': `linear-gradient(to top, ${shadowColor}, ${_hexToRgba(shadowColor, 0.8)})`}"></view>
			<view class="position-absolute bottom-10 left-0 right-0 y-flex y-row y-align-center y-justify-center"
			 @tap="showFull = !showFull">
				<text :style="{'font-size': _pixelunit(tipSize), 'color': tipColor}">{{ showFull ? closeText : openText}}</text>
				<com-icon :name="showFull ? 'fold' : 'unfold'" :size="tipSize" :color="tipColor"></com-icon>
			</view>
		</view>
	</view>
</template>

<script>
	import { pixelunit, unitpixel, hexToRgba, rgbaToHex, rgbToHex } from '@/assets/js/util.js'
	export default {
		props: {
			height: {
				type: [String, String],
				default: 200
			},
			max: {
				type: [String, String],
				default: 200
			},
			selectable: {
				type: Boolean,
				default: false
			},
			text: {
				type: String,
				default: ''
			},
			fontSize: {
				type: [String, String],
				default: 28
			},
			align: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: '#333'
			},
			lineHeight: {
				type: [String, Number],
				default: 32
			},
			lines: {
				type: [String, Number],
				default: ''
			},
			openText: {
				type: String,
				default: '展开阅读全文'
			},
			closeText: {
				type: String,
				default: '收起'
			},
			tipSize: {
				type: [String, String],
				default: 26
			},
			tipColor: {
				type: String,
				default: '#2979ff'
			},
			shadowColor: {
				type: String,
				default: '#fff'
			}
		},
		computed: {
			moreShow () {
				return this.text.length > this.max
			},
			boxHeight () {
				return this.text.length > this.max ? this.height : 'auto'
			}
		},
		data () {
			return {
				showFull: false
			}
		},
		methods: {
			_pixelunit(size) {
				return pixelunit(size)
			},
			_rgbaToHex (rgba) {
				return rgbaToHex(rgba)
			},
			_hexToRgba (hex, opacity) {
				if ( hex.indexOf('rgba') > -1 ) hex = rgbaToHex(hex)
				if ( hex.indexOf('rgb') > -1 ) hex = rgbToHex(hex)
				return hexToRgba(hex, opacity)
			},
			handleLongpress () {
				this.$emit('longpress', this.text)
			}
		}
	}
</script>

<style>
</style>